<template>
  <div class="chart-card">
    <div class="chart-header">
      <span class="title">全国体校教练员数量-分布情况</span>
    </div>
    <div class="radio-group-wrapper">
      <el-radio-group v-model="activeTab" size="small">
        <el-radio-button label="在编">在编</el-radio-button>
        <el-radio-button label="外聘">外聘</el-radio-button>
      </el-radio-group>
    </div>
    <div style="display: flex;justify-content: space-between;">
      <div class="chart-content">
        <div class="chart-area">
          <div class="total-number">47,201</div>
          <div ref="chart1" class="chart-container"></div>
        </div>
        <div class="data-list">
          <div
            class="data-item"
            v-for="(item, index) in chartData"
            :key="index"
          >
            <div class="item-name">
              <span
                class="color-dot"
                :style="{ backgroundColor: item.itemStyle.color }"
              ></span>
              <span>{{ item.name }}</span>
            </div>
            <div class="item-value">{{ formatNumber(item.value) }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="chart-content">
        <div class="chart-area">
          <div class="total-number">47,201</div>
          <div ref="chart2" class="chart-container"></div>
        </div>
        <div class="data-list">
          <div class="data-item" v-for="(item, index) in chartData" :key="index">
            <div class="item-name">
              <span class="color-dot" :style="{ backgroundColor: item.itemStyle.color }"></span>
              <span>{{ item.name }}</span>
            </div>
            <div class="item-value">{{ formatNumber(item.value) }}</div>
          </div>
        </div>
      </div> -->
      <!-- <div class="chart-content">
        <div class="chart-area">
          <div class="total-number">47,201</div>
          <div ref="chart3" class="chart-container"></div>
        </div>
        <div class="data-list">
          <div class="data-item" v-for="(item, index) in chartData" :key="index">
            <div class="item-name">
              <span class="color-dot" :style="{ backgroundColor: item.itemStyle.color }"></span>
              <span>{{ item.name }}</span>
            </div>
            <div class="item-value">{{ formatNumber(item.value) }}</div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "SchoolPieChart",
  data() {
    return {
      chart: null,
      activeTab: "在编",
      chartData: [
        { value: 34201, name: "30岁", itemStyle: { color: "#409EFF" } },
        { value: 12803, name: "30岁", itemStyle: { color: "#E6A23C" } },
        { value: 6803, name: "30岁", itemStyle: { color: "#F56C6C" } },
        { value: 6201, name: "30岁", itemStyle: { color: "#67C23A" } },
        { value: 6201, name: "30岁", itemStyle: { color: "#909399" } }
      ]
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    formatNumber(num) {
      return num.toLocaleString();
    },
    initChart() {
      this.chart1 = echarts.init(this.$refs.chart1);
      // this.chart2 = echarts.init(this.$refs.chart2);
      // this.chart3 = echarts.init(this.$refs.chart3);
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        series: [
          {
            type: "pie",
            radius: ["65%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: this.chartData,
            emphasis: {
              scale: true,
              scaleSize: 10
            }
          }
        ]
      };
      this.chart1.setOption(option);
      // this.chart2.setOption(option);
      // this.chart3.setOption(option);
      // 监听父元素大小变化
      var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          this.chart1.resize();
          // this.chart2.resize();
          // this.chart3.resize();
          // console.log("Element:", entry.target);
          // console.log(`Element size: ${cr.width}px x ${cr.height}px`);
          // console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
        }
      });

      ro.observe(cc);
    }
  }
};
</script>

<style scoped>
.chart-card {
  height: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.chart-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
}

.chart-area {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-group-wrapper {
  background-color: #f5f7fa;
  margin: 10px 0;
}

.total-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150%;
  font-weight: bold;
  color: #303133;
}

.chart-container {
  width: 100%;
  height: 300px;
}

.data-list {
  width: 220px;
  margin-left: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.data-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.item-name {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  min-width: 120px;
}

.color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

.item-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}
</style>
